<template>
  <!--
   动态菜单 item 递归实现
   essentialLinks ： 菜单列表
   initLevel ： 菜单初始化缩进等级
   author ： ths
-->

  <div v-for="(item, index) in essentialLinks" :key="index">
    <!--
    当没有子菜单时，结束递归
    exact: 切换到别的路由，激活样式也一直存在
    :exact="item.path === '/'"
    expand-separator: 扩大分离器
    default-opened： 默认打开菜单
  -->

    <div v-if="!item.children" style="position: relative">
      <span class="sort bg-primary" v-show="sortActive(item)"></span>
      <q-expansion-item
        v-if="item.meta.show"
        :header-inset-level="initLevel"
        expand-icon="1"
        :to="item.path"
        :label="item.meta.title"
        :header-style="itemStyleActive(item)"
        style="font-size: 14px; color: #999999"
      />
    </div>
    <!-- 子菜单依然存在时，继续递归 " -->
    <div v-else class="row no-wrap">
      <q-icon
        :name="item.meta.icon"
        size="sm"
        class="q-ml-md"
        color="white"
        style="margin-top: 10px"
      />
      <q-expansion-item
        :default-opened="defaultOpen(item)"
        v-if="isShowRightMenu == item.meta.fixedMenu"
        expand-separator
        :duration="duration"
        :header-inset-level="initLevel"
        :label="item.meta.title"
        expand-icon-class="iconCss"
        :header-style="headerStyleActive(item)"
        :group="item.meta.title"
        style="
          font-size: 16px;
          margin: 0 auto;
          color: white;
          white-space: nowrap;
          width: 100%;
          ':'color: #1f2946;
          white-space: nowrap;
        "
      >
        <!-- 进入下一次递归 -->
        <EssentialLink
          :essentialLinks="item.children"
          :init-level="initLevel + 0.3"
        />
      </q-expansion-item>
    </div>
    <!-- <q-separator v-if="item.children && isShowRightMenu === item.meta.fixedMenu && isShowRightMenu != '看板'" class="separator"/> -->
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { mapGetters } from "vuex";
export default defineComponent({
  name: "EssentialLink",
  props: {
    essentialLinks: {
      type: Array,
      default: function () {
        return [];
      },
    },
    initLevel: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  setup() {
    return {
      // isShowRightMenu:'机器'
    };
  },
  computed: {
    /**
     * 如果是微信浏览器，则添加 line-height: normal 样式
     * @returns {boolean}
     */
    isWeChart() {
      return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
    },
    ...mapGetters(["duration", "themeColor", "isShowRightMenu"]),
  },
  methods: {
    /**
     * startsWith: 数组的方法，是否以指定的前缀开始
     * 一级路由的颜色设置
     */
    headerStyleActive(item) {
      if (item.children.length === 1) {
        if (item.children[0].path === this.$route.path) {
          if (!this.themeColor || this.themeColor.primary !== "#00CBED") {
            return {
              color: "#f4f4f5",
            };
          } else {
            return {
              color: "#E64E28",
            };
          }
        }
        return {};
      }
      if (item.children.length > 1) {
        if (item.children.find((item) => item.path === this.$route.path)) {
          if (!this.themeColor || this.themeColor.primary !== "#00CBED") {
            return {
              color: "#f4f4f5",
            };
          } else {
            return {
              color: "#E64E28",
            };
          }
        }
        return {};
      }
      return {};
    },

    /**
     * 子路由激活，样式重置事件 (及切换主题事件)
     */
    itemStyleActive(item) {
      if (item.path === this.$route.path) {
        if (
          !this.themeColor ||
          !this.themeColor.primary ||
          this.themeColor.primary === "#00FF00"
        ) {
          return {
            color: "#00FF00",
            whiteSpace: "nowrap",
          };
        }
        if (this.themeColor && this.themeColor.primary === "#73b3f7") {
          return {
            color: "#5e8dc0",
            whiteSpace: "nowrap",
          };
        }
        if (this.themeColor && this.themeColor.primary === "#EB5A30") {
          return {
            color: "#EB5A30",
            whiteSpace: "nowrap",
          };
        }
      }
    },
    /**
     * 子路由前竖杠激活，
     */
    sortActive(item) {
      if (item.path === this.$route.path && item.meta.show) {
        return true;
      } else {
        return false;
      }
    },
    defaultOpen(item) {
      if (item.children.length === 1) {
        if (item.children[0].path === this.$route.path) {
          return true;
        }
        return false;
      }
      if (item.children.length > 1) {
        if (item.children.find((item) => item.path === this.$route.path)) {
          return true;
        } else if (item.children.find((item) => item.meta.oneMenuShow === 1)) {
          return true;
        }
        return false;
      }
    },
  },
});
</script>
<style lang="scss">
.iconCss {
  .q-icon {
    transform: rotate(-90deg);
  }
  .q-expansion-item__toggle-icon--rotated {
    transform: rotate(0deg);
  }
}

.q-item__section--side {
  color: inherit;
}
.sort {
  width: 3px;
  height: 13px;
  // background: #FF9F03;
  position: absolute;
  top: 17px;
  left: 20px;
}
.separator {
  width: 95%;
  height: 1px;
  background: #6c7e8e;
  border-radius: 1px;
  opacity: 0.14;
  margin: 0 auto;
}
</style>
